<template>
	<view class="warehouse">
		<u-sticky bgColor="#f7f8fa">
			<view class="m-x-30 p-y-20">
				<view class="j-between">
					<view v-for="(item, index) in btns" :key="index" class="br-10 card f-center" :style="{background:item.color}"
						@click="btnHandle(item.code)">
						<image :src="item.src" style="width: 95rpx;height: 86rpx;"></image>
						<view class="title">
							<view>{{item.title}}</view>
							<view>{{item.litterTitle}}</view>
						</view>
					</view>
				</view>
				<view class="m-b-20">
					<u-tabs :list="tabList" :activeStyle="{ color: '#3c9cff', fontWeight: 'bold' }"></u-tabs>
				</view>
			</view>
		</u-sticky>
		<view class="m-x-30 m-y-20">
			<view v-for="(item, index) in list" :key="index" class="format-item" @click="showDetail(item)">
				<view class="format-tip" :class="[item.className]">{{item.statusName}}</view>
				<view class="format-content">
					<view class="name">借用日期：{{item.approverOutDate}}</view>
					<view class="time">借用人：{{item.realName}}</view>
					<view class="time" v-show="item.externalName">外借人： {{item.externalName}}</view>
					<view class="detail" v-show="item.show">
						<u-row v-for="(data, i) in item.instrumentsDTOs" :key="i" customStyle="margin-botton: 10rpx">
							<u-col span="8">
								<view class="text-e">{{data.name}}({{data.modelNumber}})</view>
							</u-col>
							<u-col span="4">
								<view class="text-e">{{data.devicePrecision}}</view>
							</u-col>
						</u-row>
						<view class="flex j_end w-100 p-t-10" v-if="item.statusName=='已驳回'">
							<u-button type="primary" size="small" text="去处理" custom-style="width: 100rpx;margin: 0"
								@click="backHandler(item)"></u-button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="loadmore" v-if="list.length">
			<u-loadmore :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText"
				:nomore-text="nomoreText" />
		</view>
		<u-empty v-if="!list.length" marginTop="90rpx" mode="list" icon="/static/null.png">
		</u-empty>
		<u-gap height="160rpx" bgColor="#f6f7f9"></u-gap>
		<!-- 借用仪器弹框 -->
		<u-modal :show="show" title="选择借用仪器的用处" :showConfirmButton="false">
			<view class="modal-btn">
				<u-radio-group v-model="useType" iconPlacement="right" placement="column">
					<view v-for="item in useTypeList" :key="item" class="m-b-30" :class="[item==useType?'radio-border':'']">
						<u-radio :label="item" :name="item"></u-radio>
					</view>
				</u-radio-group>
				<u-button type="primary" text="确定" @click="onConfirm"></u-button>
				<view style="height: 20rpx;"></view>
				<u-button text="取消" @click="onCancel"></u-button>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import SetTabBar from '@/mixins/SetTabBar.js'
	export default {
		mixins: [SetTabBar],
		onShow() {
			// #ifdef MP-WEIXIN
			this.setTabBarIndex(0);
			// #endif
			this.getWarehouseList()
		},
		onLoad() {
			this.getUserInfo()
		},
		data() {
			return {
				show: false,
				total: 0,
				useType: '正常使用',
				useTypeList: ['正常使用', '外借他人'],
				form: {
					page: 1,
					limit: 20,
					order: 'desc', //asc、desc
					orderField: 'approver_out_date',
					applicantId: ''
				},
				tabList: [{
					name: '借用记录',
				}, ],
				detailList: [{
						name: '申请仪器',
						key1: 'key'
					},
					{
						name: '型号规模',
						key1: 'key'
					},
					{
						name: '准确度',
						key1: 'key'
					},
					{
						name: '制造厂商',
						key1: 'key'
					},
					{
						name: '出厂编号',
						key1: 'key'
					},
				],
				btns: [{
						code: 'loan',
						title: '我要借',
						color: '#0e64fe',
						src: '/static/icons/out.png',
						litterTitle: '点击去借工具',
					},
					{
						code: 'back',
						title: '我要还',
						color: '#faa731',
						src: '/static/icons/in.png',
						litterTitle: '点击去还工具',
					},
				],
				list: [],
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.form.limit = 20
			this.getWarehouseList()
		},
		// 上拉加载更多
		onReachBottom() {
			if (this.total > this.form.limit) {
				this.form.limit = this.form.limit + 10
				this.getWarehouseList()
			}
		},
		methods: {
			async getWarehouseList() {
				this.status = 'loading';
				const res = await this.$api.getWarehouseList(this.form)
				this.list = res.data.list.map(item => {
					item.show = false
					item.realName = item.applicantUser ? item.applicantUser.realName : ''
					// task 对象是工作流 为null是结束了
					if (!item.task) {
						item.statusName = '已归还'
						item.className = 'bg-808080'
					} else if (item.task.taskName == '出库审批' || item.task.taskName == '外借审批') {
						item.statusName = '待审核'
						item.className = 'bg-f4ad23'
					} else if (item.task.taskName == '入库审批' || item.task.taskName == '归还审批') {
						item.statusName = '归还待审核'
						item.className = 'bg-f4ad23'
					} else if (item.task.taskName == '出库申请' || item.task.taskName == '外借申请') {
						item.statusName = '已驳回'
						item.className = 'bg-f42323'
					} else if (item.task.taskName == '入库申请') {
						item.statusName = '待归还'
						item.className = 'bg-09B300'
					} else if (item.task.taskName == '外借归还') {
						item.statusName = '外借中'
						item.className = 'bg-0e64fe'
					}
					return item
				})
				this.total = res.data.total
				this.status = this.total <= this.form.limit ? 'nomore' : 'loadmore';
				uni.stopPullDownRefresh();
			},
			showDetail(item, index) {
				item.show = !item.show
			},
			// 外借归还按钮点击
			btnHandle(code) {
				if (code === 'back') {
					uni.navigateTo({
						url: `/pages/back/back`
					});
					return
				}
				this.show = true
			},
			// 借用仪器
			onConfirm() {
				this.show = false
				uni.setStorageSync('loanType', this.useType)
				uni.navigateTo({
					url: `/pages/loan/loan`
				});
			},
			// 借用仪器取消
			onCancel() {
				this.show = false
				// this.useType = '正常使用'
				uni.setStorageSync('loanType', null)
			},
			getUserInfo() {
				const info = uni.getStorageSync('userInfo');
				if (this.$hasPermission('sys:device:troubleLookALL')) {
					this.form.creator = ''
					return
				}
				this.form.applicantId = JSON.parse(info).id
			},
			backHandler(data) {
				let backComment = data.task.comment
				uni.setStorageSync('loanType', '')
				if (data.externalName) {
					uni.setStorageSync('loanType', '外借他人')
				}
				uni.navigateTo({
					url: `/pages/loan/loan?id=${data.id}&backComment=${backComment}&taskId=${data.task.taskId}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.warehouse {
		// padding: 20rpx 30rpx;

		.card {
			width: 336rpx;
			height: 150rpx;
		}

		.title {
			color: #FFFFFF;
			padding-left: 16rpx;

			:first-child {
				font-size: 32rpx;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 42rpx;
			}

			:last-child {
				font-size: 24rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 42rpx;
			}
		}

		.name {
			font-size: 30rpx;
			font-weight: 600;
			color: #333333;
			padding-bottom: 10rpx;
		}

		.time {
			font-size: 22rpx;
			font-weight: 400;
			color: #666666;
		}

		.detail {
			background: #F7F9FC;
			border-radius: 5rpx;
			padding: 15rpx 20rpx;
			font-size: 24rpx;
			color: #919191;
			margin-top: 10rpx;
		}

		::v-deep .u-popup__content {
			background: url('@/static/modal-bg.png') no-repeat;
		}


		::v-deep .u-radio {
			height: 90rpx;
			padding: 0 30rpx;
		}

		.radio-border {
			border: 1px solid #0e64fe;
			background-color: #FFFFFF;
			border-radius: 10rpx;
		}
	}

	.modal-btn {
		width: 100%;
	}

	::v-deep .u-modal__title {
		color: #0e64fe !important;
	}
</style>